<template>
  <el-container style="height: 100%; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '2']">
        <el-submenu index="1">
          <template slot="title"
            ><i class="el-icon-message"></i>查询发票</template
          >
          <el-menu-item-group>
            <el-menu-item index="1-1" @click="toMain">首页</el-menu-item>
            <!-- <el-menu-item index="1-2" @click="toMonth">按月份查询</el-menu-item>
            <el-menu-item index="1-3" @click="toSum">统计发票</el-menu-item> -->
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-menu"></i>上传发票</template>
          <el-menu-item-group>
            <el-menu-item index="2-1" @click="toUpload">上传发票</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ user.username }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="editUser"
              >个人中心</el-dropdown-item
            >
            <el-dropdown-item @click.native="logout">注销登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <router-view> </router-view>
    </el-container>
    <el-dialog
      title="编辑个人信息"
      :visible="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form>
        <el-form-item label="tel:" class="form-login-item">
          <el-input v-model="user.tel" placeholder="请输入"></el-input><br />
        </el-form-item>
        <el-form-item label="email:" class="form-login-item">
          <el-input v-model="user.email" placeholder="请输入"></el-input><br />
        </el-form-item>
        <el-form-item label="password:" class="form-login-item">
          <el-input
            v-model="user.password"
            placeholder="不输入就不会修改"
          ></el-input
          ><br />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdate">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<style>
body {
  padding: 0;
  margin: 0;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.el-container {
  height: 100vh;
  border: none !important;
}

.el-menu {
  height: 100%;
}
</style>

<script>
import { updateUserCommon } from "@/service.js";
export default {
  name: "Main",
  data() {
    return {
      dialogVisible: false,
      user: {
        username: "",
        tel: "",
        email: "",
        password: "",
      },
    };
  },
  methods: {
    editUser() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    async handleUpdate() {
      const res = await updateUserCommon(this.user);
      if (res.data.code == 0) {
        this.$message.success(res.data.message);
        this.$router.push({ path: "/" });
      } else if (res.data.code == 1) {
        this.$message.error(res.data.message);
      }
    },
    selectInvoices() {
      this.$axios({
        method: "get",
        url: "/invoice/select",
        headers: {
          token: sessionStorage.getItem("token"),
        },
      }).then((res) => {
        if (res.data.code == 0) {
          this.invoices = res.data.data;
        }
      });
    },
    toUpload() {
      this.$router.push({ path: "/upload" });
    },
    toMain() {
      this.$router.push({ path: "/main" });
    },
    logout() {
      this.$axios({
        method: "get",
        url: "/user/out",
        headers: {
          token: sessionStorage.getItem("token"),
        },
      }).then((res) => {
        if (res.data.code == 0) {
          sessionStorage.clear();
          this.$router.replace({ path: "/" });
        }
      });
    },
    getUser() {
      this.$axios({
        method: "get",
        url: "/user/get",
        headers: {
          token: sessionStorage.getItem("token"),
        },
      }).then((res) => {
        if (res.data.code == 0) {
          this.user = res.data.data;
        }
      });
    },
  },
  mounted() {
    this.selectInvoices();
    this.getUser();
  },
};
</script>
